<template>
  <div class="classAdd">
    <el-card>
        <h1>添加课表</h1>
        <el-form :model="formClass" ref="formClass"  label-position="right" :rules="rulesClass"  label-width="120px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="选择期数:" prop="data_periods" class="sec_per" required>
                        <el-select v-model="formClass.data_periods" placeholder="请选择期数" @change="getClassGroup(formClass.data_periods)">
                            <el-option
                              v-for="(item,index) in periods"
                              :key="index"
                              :label="item.cg_periods"
                              :value="item.school_id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="选择组数:" prop="cg_id" class="sec_per">
                        <el-select v-model="formClass.cg_id" multiple collapse-tags placeholder="请选择组数">
                            <el-option
                              v-for="item in classes"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="选择周数:" prop="data_weeks" class="sec_per" required>
                        <el-select v-model="formClass.data_weeks" placeholder="请选择周数">
                            <el-option
                              v-for="item in weeks"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="选择课程日期:" prop="data_time" class="sec_per" required>
                        <el-date-picker
                          v-model="formClass.data_time"
                          value-format="yyyy-MM-dd"
                          type="date"
                          placeholder="选择课程日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="隐藏的课程ID:" prop="course_id" class="sec_per" width="120px" v-if='show_c'>
                        <el-input
                            placeholder="隐藏的课程ID"
                            v-model="formClass.course_id"> 
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="隐藏的课程编号:" prop="course_no" class="sec_per" width="120px" v-if='show_c'>
                        <el-input
                            placeholder="隐藏的课程编号"
                            v-model="formClass.course_no"> 
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="选择课程:" prop="course_name" class="sec_per" width="120px" required>
                        <el-input
                            placeholder="请选择课程名称"
                            @focus="open_course"
                            v-model="formClass.course_name"> 
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="选择上课时间:" prop="c_time_row1" class="sec_per" width="120px" required>
                        <el-select v-model="formClass.c_time_row1" placeholder="请选择上课时间">
                            <el-option
                              v-for="item in sections"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="一共有几节课:" prop="c_time_length" class="sec_per" width="120px" required>
                        <el-select v-model="formClass.c_time_length" placeholder="请选择一共有几节课">
                            <el-option
                              v-for="item in sec_len"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="上课教师:" prop="tea_name_all" class="sec_per" width="120px" required>
                        <el-input
                            placeholder="请选择上课教师"
                            @focus="open_teacher"
                            v-model="formClass.tea_name_all"> 
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="上课地点:" prop="cg_address" class="sec_per" width="120px" required>
                        <el-input v-model.trim="formClass.cg_address" placeholder="请输入上课地点"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item>
                <el-button type="primary" @click="onSubmit('formClass')">立即创建</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
        <!-- 选择课程弹框 -->
        <el-dialog title="选择课程" :visible.sync="dialogFormVisible">
            <el-transfer
                filterable
                :render-content="renderContent"
                filter-placeholder="请输入课程查询"
                :titles="['所有课程', '已选择课程']"
                v-model="selected_class"
                :data="data_left_data">
            </el-transfer>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirm_class(selected_class,data_left_data)">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 选择上课老师 -->
        <el-dialog title="选择上课教师" :visible.sync="dialogTeaVisible">
            <el-transfer
                filterable
                :render-content="renderContent"
                filter-placeholder="请输入教师查询"
                :titles="['所有教师', '已选择教师']"
                v-model="teacher_txt"
                :data="data_left_tea">
            </el-transfer>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTeaVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirm_tea(teacher_txt,data_left_tea)">确 定</el-button>
            </div>
        </el-dialog>
    </el-card>
  </div>
</template>

<script>
  import addclass from '@/api/course';
    export default {
        name: "classAdd",
      data(){
        return {
            show_c: false,
            data_left_data: [],
            selected_class: [],
            data_left_tea: [],
            teacher_txt: [],
            formClass: 
            {
                data_periods: '',
                cg_id: '', //组数id
                data_weeks: '',
                data_time: '',
                course_name: '',
                course_id: '', //此隐藏
                course_no: '', //此隐藏
                c_time_row1: '',
                c_time_length: '', //一共有几节
                tea_name_all: '',
                tea_id_all: '',
                cg_address: ''
            },
            anyWeek: '',
            yyyymmdds: '',
            teachers: {
                tea_name1: '',
                tea_id1: '',
                tea_name2: '',
                tea_id2: '',
                tea_name3: '',
                tea_id3: '',
                tea_name4: '',
                tea_id4: '',
                tea_name5: '',
                tea_id5: '',
            },
            rulesClass: {
                data_periods: [
                    { required: true, message: '请选择学期！', trigger: 'blur' }
                ],
                cg_id: [
                    { required: true, message: '请选择班级！', trigger: 'blur' }
                ],
                data_weeks: [
                    { required: true, message: '请选择周数！', trigger: 'blur' }
                ],
                data_time: [
                    { required: true, message: '请选择日期！', trigger: 'blur' }
                ],
            },
            periods: [],
            classes: [],
            weeks: [
                {
                    value: '1',
                    label: '第一周',
                },
                {
                    value: '2',
                    label: '第二周',
                },
                {
                    value: '3',
                    label: '第三周',
                },
                {
                    value: '4',
                    label: '第四周',
                },
                {
                    value: '5',
                    label: '第五周',
                },
                {
                    value: '6',
                    label: '第六周',
                },
                {
                    value: '7',
                    label: '第七周',
                },
                {
                    value: '8',
                    label: '第八周',
                },
                {
                    value: '9',
                    label: '第九周',
                },
                {
                    value: '10',
                    label: '第十周',
                },
                {
                    value: '11',
                    label: '第十一周',
                },
                {
                    value: '12',
                    label: '第十二周',
                },
                {
                    value: '13',
                    label: '第十三周',
                },
                {
                    value: '14',
                    label: '第十四周',
                },
                {
                    value: '15',
                    label: '第十五周',
                },
            ],
            sections: [
                {
                    value: '1',
                    label: '第1节(8:30-9:15)',
                },
                {
                    value: '2',
                    label: '第2节(9:20-10:05)',
                },
                {
                    value: '3',
                    label: '第3节(10:25-11:10)',
                },
                {
                    value: '4',
                    label: '第4节(11:15-12:00)',
                },
                {
                    value: '5',
                    label: '第5节(14:30-15:15)',
                },
                {
                    value: '6',
                    label: '第6节(15:20-16:05)',
                },
                {
                    value: '7',
                    label: '第7节(16:25-17:10)',
                },
                {
                    value: '8',
                    label: '第8节(17:15-18:00)',
                },
                {
                    value: '9',
                    label: '第9节(19:00-19:45)',
                },
                {
                    value: '10',
                    label: '第10节(19:50-20:35)',
                },
                {
                    value: '11',
                    label: '第11节(20:50-21:35)',
                },
                {
                    value: '12',
                    label: '第12节(21:40-22:25)',
                },
            ],
            sec_len: [
                {
                    value: '1',
                    label: '1节',
                },
                {
                    value: '2',
                    label: '2节',
                },
                {
                    value: '3',
                    label: '3节',
                },
                {
                    value: '4',
                    label: '4节',
                },
                {
                    value: '5',
                    label: '5节',
                },
                {
                    value: '6',
                    label: '6节',
                },
                {
                    value: '7',
                    label: '7节',
                },
                {
                    value: '8',
                    label: '8节',
                },
                {
                    value: '9',
                    label: '9节',
                },
                {
                    value: '10',
                    label: '10节',
                },
            ],
            courses: [],
            dialogFormVisible: false,
            dialogTeaVisible: false,
            all_tea: [], //所有老师的名字
            all_tea_key: [], //所有老师的id
            
        }
      },
    mounted(){
        this.getAllSchool();
        this.getALLCourse();
        this.getALLTeacher();
        // this.getClassGroup();
    },
    methods: {
        setNowTimes (time) {
            let myDate = new Date(time)
            let wk = myDate.getDay()
            let yy = String(myDate.getFullYear())
            let mm = String(myDate.getMonth() < 10 ? '0' + (myDate.getMonth() + 1) :(myDate.getMonth() + 1) )
            let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate())
            let hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours())
            let min = String(myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes())
            let sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds())
            let weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
            let weeks_num = ['7','1','2','3','4','5','6']
            let week = weeks[wk]
            let anyweek = weeks_num[wk]
            this.nowDate = yy + '/' + mm + '/' + dd ;
            this.nowTime = hou + ':' + min + ':' + sec
            this.anyWeek = anyweek
        },
        formatDate(date){
            let d = new Date(date);
            let y = d.getFullYear(); // 年份
            let m = (d.getMonth() + 1).toString().padStart(2,'0'); // 月份
            let r = d.getDate().toString().padStart(2,'0'); // 日子
            return `${y}.${m}.${r}`;// es6 字符串模板
        },
        // 获取期数信息
        getAllSchool() {
            let that = this;
            addclass.getALLSchool().then(function (resp) {
                if (resp.data.code == '200') {
                    // 参数拼接，得到想要的数据格式
                    var list_len = resp.data.data.list.length;
                    var start_temp = resp.data.data.list[0].cg_start_time;
                    for (var i = 0; i < list_len; i++) {
                        var temp_start_time = resp.data.data.list[i].cg_start_time;
                        var temp_end_time = resp.data.data.list[i].cg_end_time;
                        var school_id = resp.data.data.list[i].school_id;
                        var start_time = that.formatDate(temp_start_time);
                        var end_time = that.formatDate(temp_end_time);
                        var start_end = resp.data.data.list[i].cg_periods + '(' + start_time + '-' + end_time + ')';
                        that.periods.push({
                            cg_periods: start_end,
                            school_id: school_id
                        });
                    }
                } else {
                    that.$message.warning("期数获取失败!")
                }
            })
        },
        // 获取分班信息
        getClassGroup(school) {
            let that = this;
            that.formClass.cg_id = '';
            that.classes = [];
            addclass.getClassGroup(school).then(function (resp) {
                if (resp.data.code == '200') {
                    var xs = resp.data.data
                    var leng = xs.length;
                    for (var i = 0; i < leng; i++) {
                        var value_id = xs[i].cg_id;
                        var label_txt = xs[i].schoolClass.class_name + ' ' + xs[i].cg_classNo + ' ' + xs[i].cg_halfgroupNo;
                        that.classes.push({
                            label: label_txt,
                            value: value_id
                        });
                    }
                } else {
                    that.$message.warning("分组信息获取失败!")
                }
            })
        },
        // 获取所有课程信息
        getALLCourse() {
            let that = this;
            addclass.getALLCourse().then(function (resp) {
                if (resp.data.code == '200') {
                    resp.data.data.forEach((item, index) => {
                    that.data_left_data.push({
                        label: item.course_name,
                        key: item.course_id,
                        course_no: item.course_no,
                      });
                    });
                } else {
                    that.$message.warning("课程获取失败!")
                }
            })
        },
        getALLTeacher() {
            let that = this;
            addclass.getALLTeacher().then(function (resp) {
                if (resp.data.code == '200') {
                    resp.data.data.forEach((item, index) => {
                    that.data_left_tea.push({
                        label: item.teacher_name,
                        key: item.teacher_id
                      });
                    });
                } else {
                    that.$message.warning("教师获取失败!")
                }
            })
        },
        // 打开选择课程弹框
        open_course() {
            this.dialogFormVisible = true;
        },
        // 打开选择教师弹框
        open_teacher() {
            this.dialogTeaVisible = true;
        },
        // 显示title属性
        renderContent (h, option) {
            return h('span', {domProps: {title: option.label}}, option.label,);
        },
        // 确认分配的课程
        confirm_class(selected_class,data) {
            var that = this;
            // 课程id是从一开始的 所以减一个一
            var selected_temp = selected_class - 1;
            // console.log(data[selected_temp]);
            let arr_len = selected_class.length;
            if (arr_len != '1') {
                that.$message.error('只能选择一门课程！');
            }else{
                that.dialogFormVisible = false;
                that.formClass.course_name = data[selected_temp].label;
                that.formClass.course_id = data[selected_temp].key;
                that.formClass.course_no = data[selected_temp].course_no;
            }
        },
        // 确认选择老师
        confirm_tea(selected_tea,data_tea) {
            var that = this;
            let arr_len = selected_tea.length;
            var tea_n = '';
            var tea_id = '';
            if (arr_len >= 1 && arr_len <= 4) {
                that.dialogTeaVisible = false;
                for (var i = 0; i < arr_len; i++) {
                    var te = selected_tea[i] - 1;
                    // 将多个老师，拼接再一起
                    that.all_tea.push(
                        data_tea[te].label
                    );
                    that.tea_n = that.all_tea.join(',');
                    // 将多个老师的ID,拼接在一起
                    that.all_tea_key.push(
                        data_tea[te].key
                    );
                    that.tea_id = that.all_tea_key.join(',');
                }
                that.formClass.tea_name_all = that.tea_n

                var tea_len = that.all_tea.length;
                if (tea_len == 1) {
                    that.teachers.tea_name1 = '';
                    that.teachers.tea_id1 = '';
                    that.teachers.tea_name2 = '';
                    that.teachers.tea_id2 = '';
                    that.teachers.tea_name3 = '';
                    that.teachers.tea_id3 = '';
                    that.teachers.tea_name4 = '';
                    that.teachers.tea_id4 = '';
                    that.teachers.tea_name5 = '';
                    that.teachers.tea_id5 = '';
                    that.teachers.tea_name1 = that.all_tea[0];
                    that.teachers.tea_id1 = that.all_tea_key[0];
                }
                if (tea_len == 2) {
                    that.teachers.tea_name1 = '';
                    that.teachers.tea_id1 = '';
                    that.teachers.tea_name2 = '';
                    that.teachers.tea_id2 = '';
                    that.teachers.tea_name3 = '';
                    that.teachers.tea_id3 = '';
                    that.teachers.tea_name4 = '';
                    that.teachers.tea_id4 = '';
                    that.teachers.tea_name5 = '';
                    that.teachers.tea_id5 = '';
                    that.teachers.tea_name1 = that.all_tea[0];
                    that.teachers.tea_id1 = that.all_tea_key[0];
                    that.teachers.tea_name2 = that.all_tea[1];
                    that.teachers.tea_id2 = that.all_tea_key[1];
                }
                if (tea_len == 3) {
                    that.teachers.tea_name1 = '';
                    that.teachers.tea_id1 = '';
                    that.teachers.tea_name2 = '';
                    that.teachers.tea_id2 = '';
                    that.teachers.tea_name3 = '';
                    that.teachers.tea_id3 = '';
                    that.teachers.tea_name4 = '';
                    that.teachers.tea_id4 = '';
                    that.teachers.tea_name5 = '';
                    that.teachers.tea_id5 = '';
                    that.teachers.tea_name1 = that.all_tea[0];
                    that.teachers.tea_id1 = that.all_tea_key[0];
                    that.teachers.tea_name2 = that.all_tea[1];
                    that.teachers.tea_id2 = that.all_tea_key[1];
                    that.teachers.tea_name3 = that.all_tea[2];
                    that.teachers.tea_id3 = that.all_tea_key[2];
                }
                if (tea_len == 4) {
                    that.teachers.tea_name1 = '';
                    that.teachers.tea_id1 = '';
                    that.teachers.tea_name2 = '';
                    that.teachers.tea_id2 = '';
                    that.teachers.tea_name3 = '';
                    that.teachers.tea_id3 = '';
                    that.teachers.tea_name4 = '';
                    that.teachers.tea_id4 = '';
                    that.teachers.tea_name5 = '';
                    that.teachers.tea_id5 = '';
                    that.teachers.tea_name1 = that.all_tea[0];
                    that.teachers.tea_id1 = that.all_tea_key[0];
                    that.teachers.tea_name2 = that.all_tea[1];
                    that.teachers.tea_id2 = that.all_tea_key[1];
                    that.teachers.tea_name3 = that.all_tea[2];
                    that.teachers.tea_id3 = that.all_tea_key[2];
                    that.teachers.tea_name4 = that.all_tea[3];
                    that.teachers.tea_id4 = that.all_tea_key[3];
                }
                // 清空临时存储的数据
                that.all_tea = [];
                that.all_tea_key = [];
            }else{
                that.$message.error('请选择正确选择(1-4)位教师！');
            }
        },
        onSubmit(formName) {
            var that = this;
            //获取分班信息
            this.$refs[formName].validate((valid) => {
            if (valid) {
            // console.log('您点击了提交按钮');
            // console.log(this.formClass);
            this.setNowTimes(this.formClass.data_time);
            var param_class = {
                course_id: parseInt(this.formClass.course_id),
                course_name: this.formClass.course_name,
                course_no: this.formClass.course_no,
                c_time_length: parseInt(this.formClass.c_time_length),
                c_time_row1: parseInt(this.formClass.c_time_row1),
                cg_idList: this.formClass.cg_id,
                tea_name1: this.teachers.tea_name1,
                tea_id1: parseInt(this.teachers.tea_id1),
                tea_name2: this.teachers.tea_name2,
                tea_id2: parseInt(this.teachers.tea_id2),
                tea_name3: this.teachers.tea_name3,
                tea_id3: parseInt(this.teachers.tea_id3),
                tea_name4: this.teachers.tea_name4,
                tea_id4: parseInt(this.teachers.tea_id4),
                tea_name5: this.teachers.tea_name5,
                tea_id5: parseInt(this.teachers.tea_id5),
                now_place: this.formClass.cg_address,
                class_day: this.formClass.data_time,
                week: parseInt(this.formClass.data_weeks),
                courseColum: parseInt(this.anyWeek),
                old_place: ""
            }
            addclass.addCourse(param_class).then(function (resp) {
                if (resp.data.code == '200') {
                    that.$message({
                        message: '课程添加成功！继续添加',
                        type: 'success'
                    });
                } else {
                    that.$message.error('添加失败，请重试...');
                }
            })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
    },
}
</script>

<style scoped>
.sec_per {
    text-align: left;
}
.el-input {
    width: 220px;
}
.dialog-footer {
    margin-right: 45%;
}

</style>
<style>
.el-transfer-panel__item .el-checkbox__input {
    left: 5px;
}
.el-checkbox {
    margin-right: 0 !important;
}
.init-box {
  overflow-y: scroll;
  height: 600px;
}
</style>